import { ref, onMounted, onUnmounted, computed } from 'vue'
import { filterTodoList } from '../utils/config'
let hashArr = ['active', 'completed', 'all'];
export default function filterTodo(todoLists) {
    let visibility = ref('all');
    let hashChangeEvent = () => {
        let hash = location.hash.replace(/#\/?/, '');
        if (hashArr.includes(hash)) {
            visibility.value = hash;
        } else {
            location.hash = '';
            visibility.value = 'all';
        }
    };

    onMounted(() => {
        window.addEventListener('hashchange', hashChangeEvent)
    });
    onUnmounted(() => {
        window.removeEventListener('hashchange', hashChangeEvent)
    });
    let filterTodoListRef = computed(() => { return filterTodoList(todoLists.value, visibility.value) });

    let activeTodoListRef = computed(() => { return filterTodoList(todoLists.value, 'active') });

    let finishedTodoListRef = computed(() => { return filterTodoList(todoLists.value, 'completed') });
    let activeLen = computed(() => { return filterTodoList(todoLists.value, 'active').length });
    let completedLen = computed(() => { return filterTodoList(todoLists.value, 'completed').length });
    return {
        visibility,
        filterTodoListRef,
        activeTodoListRef,
        finishedTodoListRef,
        activeLen,
        completedLen
    }
}